
<template>
  <!--  导航栏-->
  <el-row>
    <el-col :span="24">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>质量管理</el-breadcrumb-item>
        <el-breadcrumb-item>待检任务</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>
<!--  搜素栏-->
  <el-row style="margin-top: 20px">
    <el-col :span="24">
      <el-form :inline="true" :model="taskQuery">
        <el-form-item label="待检任务编号">
          <el-input v-model="taskQuery.taskId" placeholder="任务编号"></el-input>
        </el-form-item>
        <el-form-item label="检测类型">
          <el-select v-model="taskQuery.taskMaterialType" placeholder="请选择检测类型" style="width: 200px">
            <el-option label="全部" :value="0"></el-option>
            <el-option label="来料检验" :value="1"></el-option>
            <el-option label="过程检验" :value="2"></el-option>
            <el-option label="出货检验" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物资名称">
          <el-input v-model="taskQuery.taskGoodsName" placeholder="请输入物资名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadTask">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
<!--  内容栏-->
  <el-row style="margin-top: 20px">
    <el-col :span="24">
      <el-table :data="tasks" stripe style="width: 100%">
        <el-table-column align="center" prop="taskId" label="待检任务编号"></el-table-column>
        <el-table-column align="center" prop="taskMaterialType" label="检测类型">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.taskMaterialType == 1">来料检验</el-tag>
            <el-tag type="warning" v-else-if="scope.row.taskMaterialType == 2">过程检验</el-tag>
            <el-tag type="danger" v-else-if="scope.row.taskMaterialType == 3">出货检验</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="taskGoodsId" label="物资名称"></el-table-column>
        <el-table-column align="center" prop="taskGoodsName" label="物资名称"></el-table-column>
        <el-table-column align="center" prop="materialNumber" label="待检数量"></el-table-column>
        <el-table-column align="center" prop="taskLocation" label="位置"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-link type="primary" v-if="scope.row.taskMaterialType == 1" @click="goToIncoming(scope.row.taskId)">来料检验</el-link>
            <el-link type="primary" v-else-if="scope.row.taskMaterialType == 2" @click="goToProcess(scope.row.taskId)">过程检验</el-link>
            <el-link type="primary" v-else @click="goToShipment(scope.row.taskId)">出货检验</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
<!--  分页栏-->
  <el-row style="margin-top: 15px">
    <el-col :span="24">
      <el-pagination @change="changePage" background layout="prev, pager, next" :total="total"/>
    </el-col>
  </el-row>
<!--  来料检验-->
  <el-dialog title="来料检验" v-model="incomingVisible" width="80%" align-center>
    <el-form :inline="true" :model="newTask" label-width="120px">
<!--      待检任务数据-->
      <el-form-item label="待检任务编号">
        <el-input v-model="newTask.taskId"  disabled></el-input>
      </el-form-item>
      <el-form-item label="待检任务名称">
        <el-input v-model="newTask.taskId"  disabled></el-input>
      </el-form-item>
    </el-form>
<!--    来料检验数据-->
    <el-form :model="incomingData" label-width="120px" :inline="true">
      <el-form-item label="来料检验单编号">
        <el-input v-model="incomingData.incomingId" style="width: 200px" ></el-input>
      </el-form-item>
      <el-form-item label="来料检验单名称">
        <el-input v-model="incomingData.incomingName" style="width: 200px" ></el-input>
      </el-form-item>
      <el-form-item label="产品物料编码">
        <el-input v-model="incomingData.incomingItemId" style="width: 200px" ></el-input>
      </el-form-item>
      <el-form-item label="产品物料名称">
        <el-input v-model="incomingData.incomingItemName" style="width: 200px" ></el-input>
      </el-form-item>
      <el-form-item label="产品物料单位">
        <el-input v-model="incomingData.incomingItemUnit" style="width: 200px" ></el-input>
      </el-form-item>
      <el-form-item label="供应商编码">
        <el-input v-model="incomingData.incomingSupplierId" style="width: 200px" ></el-input>
      </el-form-item>
      <el-form-item label="供应商简称">
        <el-input v-model="incomingData.incomingSupplierName" style="width: 200px" ></el-input>
      </el-form-item>
      <el-form-item label="接受数量">
        <el-input-number v-model="incomingData.incomingReceptionCount" style="width: 200px" :min ="1"></el-input-number>
      </el-form-item>
      <el-form-item label="检测数量">
        <el-input-number v-model="incomingData.incomingMaterialCount" style="width: 200px" :min ="1"></el-input-number>
      </el-form-item>
      <el-form-item label="不合格数量">
        <el-input-number v-model="incomingData.incomingOutCount" style="width: 200px" :min ="1"></el-input-number>
      </el-form-item>
      <el-form-item label="来料日期">
        <el-date-picker v-model="incomingData.incomingDate" type="date" style="width: 200px" placeholder="请选择来料日期" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
      </el-form-item>
      <el-form-item label="检测日期">
        <el-date-picker v-model="incomingData.materialDate" type="date" style="width: 200px" placeholder="请选择检测日期" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
      </el-form-item>
      <el-form-item label="检验结果">
        <el-radio v-model="incomingData.incomingMaterialOutcome" :label="1">检验通过</el-radio>
        <el-radio v-model="incomingData.incomingMaterialOutcome" :label="2">检验不通过</el-radio>
      </el-form-item>
      <el-form-item label="合格数量">
        <el-input-number v-model="incomingData.incomingQualifiedNumber" style="width: 200px" :min ="0"></el-input-number>
      </el-form-item>
      <el-form-item label="致命缺陷数量">
        <el-input-number v-model="incomingData.incomingFatalFlaw" style="width: 200px" :min ="1"></el-input-number>
      </el-form-item>
      <el-form-item label="严重缺陷数量">
        <el-input-number v-model="incomingData.incomingFevereFlaw" style="width: 200px" :min ="1"></el-input-number>
      </el-form-item>
      <el-form-item label="轻微缺陷数量">
        <el-input-number v-model="incomingData.incomingSlightFlaw" style="width: 200px" :min ="1"></el-input-number>
      </el-form-item>
    </el-form>
    <el-form-item>
      <template #default="scope">
      <el-button type="primary" @click="taskIncoming(newTask.taskId)">确认</el-button>
      <el-button @click="cancelIncoming">取消</el-button>
      </template>
    </el-form-item>
  </el-dialog>
<!--  过程检验-->
  <el-dialog title="过程检验" v-model="processVisible" width="80%" align-center>
    <el-form :inline="true" :model="newTask" label-width="120px">
      <!--      待检任务数据-->
      <el-form-item label="待检任务编号">
        <el-input v-model="newTask.taskId"  disabled></el-input>
      </el-form-item>
      <el-form-item label="待检任务名称">
        <el-input v-model="newTask.taskId"  disabled></el-input>
      </el-form-item>
    </el-form>
    <el-form :model="processData" label-width="120px" :inline="true">
      <el-form-item label="过程检验单编号">
        <el-input v-model="processData.processId" placeholder="请输入过程检验单编号"></el-input>
      </el-form-item>
      <el-form-item label="检验类型">
        <el-select v-model="processData.processType" placeholder="请选择检验类型" style="width: 200px">
          <el-option label="首检" :value="1"></el-option>
          <el-option label="末检" :value="2"></el-option>
          <el-option label="自检" :value="3"></el-option>
          <el-option label="巡检" :value="4"></el-option>
          <el-option label="点检" :value="5"></el-option>
          <el-option label="终检" :value="6"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工单编号">
        <el-input v-model="processData.processTicketsId" placeholder="请输入工单编号"></el-input>
      </el-form-item>
      <el-form-item label="产品物料编码">
        <el-input v-model="processData.processItemId" placeholder="请输入产品物料编码"></el-input>
      </el-form-item>
      <el-form-item label="产品物料名称">
        <el-input v-model="processData.processItemName" placeholder="请输入产品物料名称"></el-input>
      </el-form-item>
      <el-form-item label="规格型号">
        <el-input v-model="processData.processItemSpecification" placeholder="请输入规格型号"></el-input>
      </el-form-item>
      <el-form-item label="单位">
        <el-input v-model="processData.processItemUnit" placeholder="请输入单位"></el-input>
      </el-form-item>
      <el-form-item label="检测数量">
        <el-input-number v-model="processData.processMaterialCount" style="width: 200px" :min ="1"></el-input-number>
      </el-form-item>
      <el-form-item label="检测结果">
        <el-select v-model="processData.processMaterialOutcome" placeholder="请选择检测结果" style="width: 200px">
          <el-option label="检验通过" :value="1"></el-option>
          <el-option label="检验不通过" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="检测日期">
        <el-date-picker v-model="processData.processMaterialDate" type="date" placeholder="选择日期" style="width: 200px"></el-date-picker>
      </el-form-item>
    </el-form>
    <el-form style="margin-top: 20px">
      <el-form-item>
        <el-button type="primary" @click="addProcessConfirm(newTask.taskId)">确认</el-button>
        <el-button @click="cancelProcess">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
<!--  出货检验-->
  <el-dialog title="出货检验" v-model="shipmentVisible" width="80%" align-center>
    <el-form :inline="true" :model="newTask" label-width="120px">
      <!--      待检任务数据-->
      <el-form-item label="待检任务编号">
        <el-input v-model="newTask.taskId"  disabled></el-input>
      </el-form-item>
      <el-form-item label="待检任务名称">
        <el-input v-model="newTask.taskId"  disabled></el-input>
      </el-form-item>
    </el-form>
    <el-form :model="shipmentData" :inline="true" label-width="120px">
      <el-form-item label="检验单编号">
        <el-input v-model="shipmentData.shipmentId" placeholder="请输入出货检验单编号" ></el-input>
      </el-form-item>
      <el-form-item label="检验单名称">
        <el-input v-model="shipmentData.shipmentName" placeholder="请输入出货检验单名称"></el-input>
      </el-form-item>
      <el-form-item label="产品编号">
        <el-input v-model="shipmentData.shipmentItemId" placeholder="请输入产品物料编码"></el-input>
      </el-form-item>
      <el-form-item label="产品名称">
        <el-input v-model="shipmentData.shipmentItemName" placeholder="请输入产品物料名称"></el-input>
      </el-form-item>
      <el-form-item label="单位">
        <el-input v-model="shipmentData.shipmentItemUnit" placeholder="请输入产品物料单位"></el-input>
      </el-form-item>
      <el-form-item label="规格型号">
        <el-input v-model="shipmentData.shipmentItemSpecification" placeholder="请输入产品物料规格型号"></el-input>
      </el-form-item>
      <el-form-item label="客户名称">
        <el-input v-model="shipmentData.shipmentClientName" placeholder="请输入客户名称"></el-input>
      </el-form-item>
      <el-form-item label="批次号">
        <el-input v-model="shipmentData.shipmentLotNumber" placeholder="请输入批次号"></el-input>
      </el-form-item>
      <el-form-item label="发货数量">
        <el-input-number v-model="shipmentData.shipmentNumber" style="width: 200px" :min ="1"></el-input-number>
      </el-form-item>
      <el-form-item label="检验数量">
        <el-input-number v-model="shipmentData.materialNumber" style="width: 200px" :min ="1"></el-input-number>
      </el-form-item>
      <el-form-item label="不合格数">
        <el-input-number v-model="shipmentData.shipmentOutCount" style="width: 200px" :min ="1"></el-input-number>
      </el-form-item>
      <el-form-item label="出货日期">
        <el-date-picker v-model="shipmentData.shipmentDate" type="date" placeholder="请选择出货日期" style="width: 200px"></el-date-picker>
      </el-form-item>
      <el-form-item label="检测日期">
        <el-date-picker v-model="shipmentData.materialDate" type="date" placeholder="请选择检测日期" style="width: 200px"></el-date-picker>
      </el-form-item>
      <el-form-item label="检测结果">
        <el-select v-model="shipmentData.materialOutcome" placeholder="请选择检测结果" style="width: 200px">
          <el-option label="检测通过" :value="1"></el-option>
          <el-option label="检测不通过" :value="2"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-form style="margin-top: 20px">
      <el-form-item>
        <el-button type="primary" @click="addShipmentConfirm(newTask.taskId)">确认</el-button>
        <el-button @click="cancelShipment">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import {ref,onMounted} from 'vue';
import {useRouter,useRoute} from "vue-router";
import {ElMessage} from "element-plus";
import taskRequest from "@/api/defece/task.js";
import incomingRequest from "@/api/defece/incoming.js";
import processRequest from "@/api/defece/process.js";
import shipmentRequest from "@/api/defece/shipment.js";
const router = useRouter();
// 封装查询对象
let taskQuery = ref({});
let tasks = ref([]);
let curPage = ref(1);
let total = ref(0);
// 来料检验弹窗的控制器
let incomingVisible = ref(false);
// 根据id查询到的待检任务信息
let newTask = ref({});
// 封装新增过程检验的数据信息
let incomingData = ref({});
// 过程检验弹窗的控制器
let processVisible = ref(false);
// 封装新增过程检验的数据信息
let processData = ref({});
// 出货检验弹窗的控制器
let shipmentVisible = ref(false);
// 封装新增出货检验的数据信息
let shipmentData = ref({});
// 出货检验弹窗的确认事件
function addShipmentConfirm(){
  addShipment();
  shipmentVisible.value = false;
  deleteTaskById(taskId);
  loadTask();
}
// 出货检验弹窗的取消事件
function cancelShipment(){
  shipmentVisible.value = false;
  newTask.value = {};
  shipmentData.value = {};
}
// 添加出货检验的数据信息
function addShipment(){
  shipmentRequest.loadAddShipment(shipmentData.value,(res)=>{
    if (res.code == 200){
      ElMessage({
        message: "添加成功",
        type: "success"
      })
    }
  })
}
// 出货检验按钮的点击事件
function goToShipment(taskId){
  shipmentVisible.value = true;
  loadTaskById(taskId);
}
// 添加过程检验的数据信息
function addProcess(){
  processRequest.loadAddProcess(processData.value,(res)=>{
    if (res.code == 200){
      ElMessage({
        message: "添加成功",
        type: "success"
      })
    }
  })
}
// 过程检验弹窗的取消事件
function cancelProcess(){
  processData.value = {};
  newTask.value = {};
  processVisible.value = false;
}
// 过程检验弹窗的确认按钮
function addProcessConfirm(){
  addProcess();
  processVisible.value = false;
  loadTask();
  deleteTaskById(taskId)
}
// 过程检验按钮的点击事件
function goToProcess(taskId){
  processVisible.value = true;
  loadTaskById(taskId);
}
// 来料检验弹窗的取消事件
function cancelIncoming(){
  incomingVisible.value = false;
  newTask.value = {};
  incomingData.value = {};
}
// 来料检验弹窗的确认事件
function taskIncoming(taskId){
  addIncoming();
  deleteTaskById(taskId);
  incomingVisible.value = false;
  newTask.value = {};
  loadTask();
}
// 根据id删除待检任务
function  deleteTaskById(taskId){
  taskRequest.loadDeleteTaskById(taskId,(res)=>{
    if (res.code == 200){
      ElMessage({
        message: "删除成功",
        type: "success"
      })
    }
  })
}
// 添加来料检验的数据信息
function addIncoming(){
  incomingRequest.loadAddIncoming(incomingData.value,(res)=>{
    if (res.code == 200){
      ElMessage({
        message: "添加成功",
        type: "success"
      })
    }
  })
}
// 来料检验的点击事件
function goToIncoming(taskId){
  incomingVisible.value = true;
  loadTaskById(taskId);
}
// 通过id获取数据信息
function loadTaskById(taskId){
  taskRequest.loadSelectByIdTask(taskId,(res)=>{
    newTask.value = res.data;
  })
}
// 加载项目
function loadTask(){
  taskRequest.loadSelectAllTask(taskQuery.value,curPage.value,10,(data)=>{
    total.value = data.data.total;
    tasks.value = data.data.list;
    console.log(tasks.value)
  })
}
// 分页栏事件
function changePage(value){
  curPage.value = value;
  loadTask();
}
onMounted(()=>{
  loadTask();
})
</script>
<style scoped>

</style>